<!--Workaround for Status -->
<div layout="row" layout-sm="column" layout-xs="column">
  <div flex-gt-sm="33">
    <div ng-controller="KafkaConnectListCtrl" ng-include="'src/kafka-connect/list/list-connectors.html'"></div>
  </div>
  <div flex-gt-sm="66" flex>
  {{connectorStatus = connectorDetails.connectorState[connectorDetails.name]; ""}}

<md-card ng-show="connectorDetails != undefined" class="view">
  <!--TOOLBAR-->
  <md-toolbar class="md-hue-2">
    <div class="md-toolbar-tools">
        <span style="font-size: 20px;margin-right:10px;">
        <i ng-show="connectorStatus == 'PAUSED'" class="fa fa-pause-circle grey" aria-label="Paused" aria-hidden="true"></i>
        <i ng-show="connectorStatus == 'RUNNING'" class="fa fa-cog green" aria-label="Running" aria-hidden="true"></i>
        <i ng-show="connectorStatus == 'FAILED'" class="fa fa-exclamation-circle red" aria-label="Failed" aria-hidden="true"></i>
        <i ng-show="connectorStatus == 'UNASSIGNED'" class="fa fa-ban" aria-label="Unassigned" aria-hidden="true"></i>
        </span>
      <h4>{{connectorDetails.name}}</h4>
      <span flex></span>

      <md-button ng-show="connectorStatus !='PAUSED'"   ng-disabled="showTaskSpinner" ng-click="pauseConnector(connectorDetails.name);" >
        <i class="fa fa-pause" aria-hidden="true"></i> Pause
      </md-button>

      <md-button ng-show="connectorStatus =='PAUSED'"  ng-disabled="showTaskSpinner" ng-click="resumeConnector(connectorDetails.name)" >
        <i class="fa fa-play" aria-hidden="true"></i> Resume
      </md-button>

      <md-button ng-hide="connectorStatus =='PAUSED'" ng-disabled="showTaskSpinner" ng-click="restartConnector(connectorDetails.name)">
        <i class="fa fa-repeat" aria-hidden="true"></i> Restart
      </md-button>
      <md-button ng-disabled="showTaskSpinner || rebalancing"  ng-click="deleteConnector(connectorDetails.name, $event);">
        <i class="fa fa-trash" aria-hidden="true"></i> Delete
      </md-button>
    </div>
  </md-toolbar>

  <!--INFO BOX-->
  <div class="connector-sum" style="background-color:white" >
    <div layout="row"  layout-align="start center" layout-padding>
      <div>
        <h3 ng-show="connectorDetails.isSource" style="font-size:12px;padding:0px; margin:0px">
          <span class="label" ng-style="{'background-color':connectorDetails.color}">{{connectorDetails.type}}</span>
          <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
          Kafka is <code>{{connectorStatus}}</code>
        </h3>
        <h3 ng-show="!connectorDetails.isSource" style="font-size:12px;padding:0px; margin:0px">
          Kafka
          <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
          <span class="label" ng-style="{'background-color':connectorDetails.color}">{{connectorDetails.type}}</span>
          is <code>{{connectorStatus}}</code>
        </h3>
      </div>
    </div>
  </div>
</md-card>

  <!--TASKS-->
<md-card ng-show="connectorDetails != undefined" class="view">
  <md-progress-linear md-mode="indeterminate" ng-show="showTaskSpinner && rebalancing != true"></md-progress-linear>
  <md-card-content style="padding-bottom: 0px;" >
    <div layout="row">
      <h4 style="margin-top: 0px;width:70px"><i class="grey" aria-hidden="true"></i> TASKS</h4>
        <p ng-show="showTaskSpinner"> Reloading configuration wont take more than 2 minutes. Please wait... </p>
        <div layout="column" ng-repeat="task in connectorDetails.tasks" ng-hide="showTaskSpinner" style="padding-right:10px; float:left;">
            <div ng-click="showTaskDetails(task)"
                 style="margin-bottom:5px;">
                <i style="float:left;color:#f5f5f5;background-color: #ccc;width: 15px;height: 11px;display: inline;    padding-left: 7px;padding-right: 3px;padding-top: 4px;padding-bottom: 6px; border-top-left-radius: 0.25em;border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0.25em;;vertical-align: middle;"
                   ng-show="task.state == 'PAUSED'" class="fa fa-pause-circle grey" aria-hidden="true" aria-label="Running"></i>
                <i style="float:left;color:green;background-color: #ccc;width: 15px;height: 11px;display: inline;padding-left: 7px;padding-right: 3px;padding-top: 4px;padding-bottom: 6px;      border-top-left-radius: 0.25em;border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0.25em;;vertical-align: middle;"
                   ng-show="task.state == 'RUNNING'" class="fa fa-cog green" aria-hidden="true" aria-label="Paused"></i>
                <i style="float:left;color:indianred;background-color: #ccc;width: 15px;height: 11px;display: inline;padding-left: 7px;padding-right: 3px;padding-top: 4px;padding-bottom: 6px;      border-top-left-radius: 0.25em;border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0.25em;;vertical-align: middle;"
                   ng-show="task.state == 'FAILED'" class="fa fa-exclamation-circle red" aria-hidden="true" aria-label="Failed"></i>
                <i style="float:left;color:#f5f5f5;background-color: #ccc;width: 15px;height: 11px;display: inline;padding-left: 7px;padding-right: 3px;padding-top: 4px;padding-bottom: 6px;      border-top-left-radius: 0.25em;border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0.25em;;vertical-align: middle;"
                   ng-show="task.state == 'UNASSIGNED'" class="fa fa-ban" aria-hidden="true" aria-label="Unassigned"></i>
                <div style="float:left;font-size: 0.83em;border: 1px solid {{ task.id == selectedTask.taskStatus.id ? 'green' : '#cccccc' }};; ;padding-left: 6px;padding-right: 6px;padding-top: 3px;padding-bottom: 3px;background: {{ task.id == selectedTask.taskStatus.id ? 'green;color:white' : '' }}">
                    {{task.id}}
                </div>
                <div style="float:left;border-top-right-radius: 0.25em;border-bottom-right-radius: 0.25em;font-size: 0.83em;border: 1px solid #cccccc; border-left:none;padding-left: 6px;padding-right: 10px;padding-top: 3px;padding-bottom: 2px;">
                    <b>[{{task.worker_id}}] </b>
                </div>
            </div>
        </div>
    </div>
    <div ng-if="selectedTask" style="font-size:11px;padding-left: 10px;border: 1px solid #ccc;margin-top: -5px;margin-left: 70px;margin-bottom: 10px;width:90%">
      <md-button class="md-mini md-primary" ng-click="invalidateSelectedTask()" style="color:black;float:right;margin:0;">close</md-button>
      <md-button class="md-mini md-primary" ng-click="restartTask(connectorDetails.name, selectedTask.taskStatus.id);" style="color:black;float:right;margin:0;">restart</md-button>

      <h5 style="margin-top:5px;margin-bottom:5px;">Task {{selectedTask.taskStatus.id}} is {{selectedTask.taskStatus.state}}</h5>
      <!--<h5 ng-if="selectedTask.taskStatus.state != 'UNASSIGNED'">CONFIG:</h5>-->

      <table style="padding-bottom:10px;width:100%;" ng-if="selectedTask.taskStatus.state != 'UNASSIGNED'">
        <tbody>
        <tr ng-repeat="(key, value) in selectedTask.taskConfig.config">
          <td>{{key}}</td>
          <td>{{value}}</td>
        </tr>
        </tbody>
      </table>

      <h5 ng-if="selectedTask.taskStatus.trace">TRACE:</h5>
      <div ng-if="selectedTask.taskStatus.state != 'UNASSIGNED'" style="width:100%;background:#f2f2f2;" ng-show="selectedTask">
        <code style="word-wrap:break-word; white-space: pre-wrap;">{{selectedTask.taskStatus.trace}}</code>
      </div>
    </div>
    <!--TOPICS-->
    <div layout="row">
      <h4 style="margin-top: 0px;width:70px"><i class="grey" aria-hidden="true"></i> TOPICS</h4>
      <h5 ng-show="connectorDetails.topics != undefined && connectorDetails.topics.length == 0" style="padding:0; margin:0px;">
        No topics discovered on this connector
      </h5>
      <div ng-repeat="topic in connectorDetails.topics" layout="column" style="padding-right:10px">
        <h5 ng-hide="connectorDetails.topics != undefined && connectorDetails.topics.length == 0" style="padding:0; margin:0px;">
          <!--{{ connectorDetails.topics }}-->
          <div style="float:left;">
            <div>
              <img src="src/assets/icons/kafka.png" class="label-img" style="float:left;background-color: #ccc;width: 15px;height: 11px;display: inline;padding: 5px;      border-top-left-radius: 0.25em;border-top-right-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0.25em;;vertical-align: middle;">
              <div style="float:left;border-top-right-radius: 0.25em;border-bottom-right-radius: 0.25em;border: 1px solid #cccccc; padding-left: 6px;padding-right: 10px;padding-top: 2px;padding-bottom: 3px;">
                {{getCleanTopic(topic);}}
              </div>
            </div>
          </div>

        </h5>
        <!--
        <md-chips style="float:left;">
          <md-chip ng-if="kafkaTopicsUIEnabled" ng-repeat="topic in connectorDetails.topics">
            <a style="text-decoration:none;" ng-href="{{kafkaTopicsUI}}/#/topic/n/{{topic}}/"
               target="_blank">
              <img src="src/assets/icons/kafka.png" class="kafka-icon-view">
              {{topic}} A
            </a>
          </md-chip>

          <md-chip ng-if="!kafkaTopicsUIEnabled" ng-repeat="topic in connectorDetails.topics">
            <img src="src/assets/icons/kafka.png" class="kafka-icon-view">
            {{topic}}
          </md-chip>
        </md-chips>
        -->
      </div>
    </div>

  </md-card-content>
</md-card>

<!--CONFIGURATION-->
<md-card ng-show="connectorDetails != undefined" class="view">
  <md-progress-linear md-mode="indeterminate" ng-show="showConfigSpinner"></md-progress-linear>
  <md-toolbar class="md-hue-2" style="background-color: transparent;color:#333;height: 20px;">
    <div class="md-toolbar-tools">
      <h4 style="font-size:14px"> <span><i class="fa fa-file-text-o" aria-hidden="true"></i> CONFIGURATION</span></h4>
      <span flex></span>
      <md-button ng-show="isEditing" ng-click="cancelEditor()"> <i class="fa fa-ban" aria-hidden="true"></i> Cancel </md-button>
      <md-button ng-show="!isEditing" ng-disabled="showTaskSpinner || rebalancing" ng-click="toggleEditor()"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit </md-button>
    </div>
  </md-toolbar>

  <md-card-content style="padding-top: 0">
      <form class="form" name="form">
        <configuration-editor
          name="connectorDetails.name"
          ng-model="model"
          ng-readonly="!isEditing">
        </configuration-editor>

        <br>

        <!--Validation Errors-->
        <div class="red" ng-messages="form.$error">
          <div ng-message="parse">Invalid syntax</div>
        </div>
        <div class="red" ng-repeat="errorConfig in errorConfigs">
          <div ng-repeat="error in errorConfig.errors">
            - "{{errorConfig.name}}" : {{error}}
          </div>
        </div>

        <!--Action buttons-->
        <md-card-actions layout="row" layout-align="end center">
          <md-button
            ng-show="isEditing"
            ng-disabled="form.$pristine || form.$invalid"
            ng-click="updateConnector(connectorDetails.name, $event, _editor);"
            class="md-raised">
            <i class="fa fa-floppy-o" aria-hidden="true"></i>
            Validate & Save
          </md-button>
        </md-card-actions>
    </form>
  </md-card-content>
</md-card>

<!-- When no such connnector exists -->
<md-card ng-show="connectorDetails == undefined">
  <md-card-title>
    <md-card-title-text>
      <span ng-hide ="notExists" class="md-headline" style="padding-bottom:10px;">Loading connector...</span>
      <span ng-show ="notExists" class="md-headline" style="padding-bottom:10px;">No such connector exists</span>
    </md-card-title-text>
  </md-card-title>
</md-card>
</div>
</div>